<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>轨迹系统</title>
		<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
		<script typet="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
		<script src="js/china.js"></script>
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
		<style>
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
				font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
			}

			body {
				background: linear-gradient(135deg, #0f3460, #1a1a2e, #16213e);
				color: #fff;
				min-height: 100vh;
				padding: 20px;
			}

			.container {
				max-width: 1400px;
				margin: 0 auto;
			}

			header {
				text-align: center;
				padding: 2px 0;
				margin-bottom: 25px;
				background: rgba(0, 0, 0, 0.25);
				border-radius: 15px;
				box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
				backdrop-filter: blur(4px);
				border: 1px solid rgba(255, 255, 255, 0.1);
			}

			
			h1 {
				font-size: 2.5rem;
				margin-bottom: 10px;
				background: linear-gradient(90deg, #00c9ff, #92fe9d);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
			}
			

			.subtitle {
				font-size: 1.2rem;
				opacity: 0.9;
				max-width: 800px;
				margin: 10px auto 0;
				line-height: 1.6;
				color: #a0d2eb;
			}

			.main-content {
				display: flex;
				flex-wrap: wrap;
				gap: 25px;
				margin-bottom: 30px;
			}

			.map-container {
				flex: 1;
				min-width: 300px;
				height: 860px;
				background: rgba(255, 255, 255, 0.05);
				border-radius: 15px;
				box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
				overflow: hidden;
				position: relative;
				border: 1px solid rgba(255, 255, 255, 0.1);
			}

			#map {
				width: 100%;
				height: 100%;
			}

			.controls {
				width: 350px;
				background: rgba(0, 0, 0, 0.3);
				border-radius: 15px;
				padding: 25px;
				box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
				backdrop-filter: blur(8px);
				border: 1px solid rgba(255, 255, 255, 0.1);
			}

			.panel {
				margin-bottom: 30px;
			}

			.panel-title {
				font-size: 1.5rem;
				margin-bottom: 20px;
				padding-bottom: 10px;
				border-bottom: 2px solid #00f2fe;
				display: flex;
				align-items: center;
				gap: 10px;
				color: #4facfe;
			}

			.input-group {
				margin-bottom: 20px;
			}

			label {
				display: block;
				margin-bottom: 8px;
				font-weight: 500;
				color: #a0d2eb;
			}

			input[type="text"] {
				width: 100%;
				padding: 14px 15px;
				border-radius: 8px;
				border: none;
				background: rgba(255, 255, 255, 0.1);
				font-size: 1rem;
				box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2);
				color: white;
				border: 1px solid rgba(255, 255, 255, 0.1);
			}

			input[type="text"]:focus {
				outline: none;
				border-color: #4facfe;
				background: rgba(255, 255, 255, 0.15);
			}

			.btn-group {
				display: flex;
				gap: 15px;
				flex-wrap: wrap;
			}

			button {
				flex: 1;
				min-width: 120px;
				padding: 14px 20px;
				border: none;
				border-radius: 8px;
				background: linear-gradient(135deg, #4facfe, #00f2fe);
				color: white;
				font-size: 1rem;
				font-weight: 600;
				cursor: pointer;
				transition: all 0.3s ease;
				box-shadow: 0 4px 15px rgba(79, 172, 254, 0.4);
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 8px;
			}

			button:hover {
				transform: translateY(-3px);
				box-shadow: 0 6px 20px rgba(79, 172, 254, 0.6);
			}

			button:active {
				transform: translateY(1px);
			}

			button.danger {
				background: linear-gradient(135deg, #ff416c, #ff4b2b);
				box-shadow: 0 4px 15px rgba(255, 65, 108, 0.4);
			}

			button.danger:hover {
				box-shadow: 0 6px 20px rgba(255, 65, 108, 0.6);
			}

			button.success {
				background: linear-gradient(135deg, #43e97b, #38f9d7);
				box-shadow: 0 4px 15px rgba(67, 233, 123, 0.4);
			}

			button.success:hover {
				box-shadow: 0 6px 20px rgba(67, 233, 123, 0.6);
			}

			.point-list {
				/* max-height: 100px; */
				overflow-y: auto;
				background: rgba(255, 255, 255, 0.05);
				border-radius: 8px;
				/* padding: 15px; */
				border: 1px solid rgba(255, 255, 255, 0.1);
			}

			.point-item {
				display: flex;
				justify-content: space-between;
				padding: 12px;
				background: rgba(255, 255, 255, 0.08);
				border-radius: 6px;
				margin-bottom: 8px;
				font-size: 0.95rem;
				transition: all 0.3s;
			}

			.point-item:hover {
				background: rgba(79, 172, 254, 0.2);
			}

			.point-item:last-child {
				margin-bottom: 0;
			}

			.point-actions {
				display: flex;
				gap: 8px;
			}

			.point-actions button {
				padding: 6px 10px;
				font-size: 0.85rem;
				min-width: auto;
			}

			.animation-controls {
				display: flex;
				gap: 15px;
				align-items: center;
				margin-top: 20px;
			}

			.slider-container {
				flex: 1;
				background: rgba(255, 255, 255, 0.1);
				border-radius: 10px;
				padding: 10px 15px;
			}

			input[type="range"] {
				width: 100%;
				height: 6px;
				border-radius: 5px;
				background: linear-gradient(to right, #4facfe, #00f2fe);
				outline: none;
				-webkit-appearance: none;
			}

			input[type="range"]::-webkit-slider-thumb {
				-webkit-appearance: none;
				width: 20px;
				height: 20px;
				border-radius: 50%;
				background: white;
				cursor: pointer;
				box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
			}

			.legend {
				display: flex;
				justify-content: center;
				gap: 30px;
				margin-top: 15px;
				flex-wrap: wrap;
			}

			.legend-item {
				display: flex;
				align-items: center;
				gap: 8px;
				font-size: 0.95rem;
				background: rgba(255, 255, 255, 0.1);
				padding: 8px 15px;
				border-radius: 20px;
			}

			.legend-color {
				width: 18px;
				height: 18px;
				border-radius: 50%;
			}

			.start-point {
				background: #43e97b;
			}

			.end-point {
				background: #ff416c;
			}

			.path {
				background: #4facfe;
			}

			.moving-point {
				background: #ffd700;
			}

			footer {
				text-align: center;
				padding: 20px;
				background: rgba(0, 0, 0, 0.25);
				border-radius: 15px;
				margin-top: 20px;
				font-size: 0.9rem;
				backdrop-filter: blur(4px);
				border: 1px solid rgba(255, 255, 255, 0.1);
				color: #a0d2eb;
			}

			.status-bar {
				display: flex;
				justify-content: space-between;
				margin-top: 10px;
				font-size: 0.9rem;
				color: #4facfe;
			}

			.loading {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				color: #4facfe;
				font-size: 1.2rem;
				z-index: 10;
			}

			@media (max-width: 900px) {
				.main-content {
					flex-direction: column;
				}

				.controls {
					width: 100%;
				}
			}

			/* 滚动条样式 */
			.point-list::-webkit-scrollbar {
				width: 8px;
			}

			.point-list::-webkit-scrollbar-track {
				background: rgba(255, 255, 255, 0.05);
				border-radius: 4px;
			}

			.point-list::-webkit-scrollbar-thumb {
				background: #4facfe;
				border-radius: 4px;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<header>
				<h1><!-- <i class="fas fa-map-marked-alt"></i> --> 运输车运行轨迹监测系统</h1>

			</header>

			<div class="main-content">
				<div class="map-container">
					<div class="loading" id="loading">
						<i class="fas fa-spinner fa-spin"></i> 正在加载地图数据...
					</div>
					<div id="map"></div>
				</div>

				<div class="controls">
					<div class="panel">
						<h2 class="panel-title"><i class="fas fa-location-dot"></i>途径点统计</h2>

						<div class="input-group" ">
							<label for="longitude"><i class="fas fa-longitude"></i> 经度 (E/W)</label>
							<input type="text" id="longitude" placeholder="例如: 116.397">
						</div>

						<div class="input-group" >
							<label for="latitude"><i class="fas fa-latitude"></i> 纬度 (N/S)</label>
							<input type="text" id="latitude" placeholder="例如: 39.907">
						</div>

						<div class="input-group" >
							<label for="point-name"><i class="fas fa-tag"></i> 标记名称</label>
							<input type="text" id="point-name" placeholder="例如: 北京">
						</div>

						<div class="btn-group" >
							<button id="add-point" class="success"><i class="fas fa-plus"></i> 添加标记</button>
							<button id="clear-points" class="danger"><i class="fas fa-trash"></i> 清除所有</button>
						</div>

						<div class="status-bar">
							<div>当前点数: <span id="point-count">0</span></div>
							<div>状态: <span id="status">就绪</span></div>
						</div>
					</div>

					<div class="panel" style="display: none;">
						<h2 class="panel-title"><i class="fas fa-route"></i>轨迹控制</h2>

						<div class="btn-group">
							<button id="draw-path"><i class="fas fa-draw-polygon"></i> 绘制轨迹</button>
							<button id="clear-path" class="danger"><i class="fas fa-broom"></i> 清除轨迹</button>
						</div>

						<!--  <div class="animation-controls">
                        <button id="animate-path"><i class="fas fa-play"></i></button>
                        <button id="pause-animation" class="danger"><i class="fas fa-pause"></i></button>
                    </div> -->

						<!-- <div class="slider-container">
                        <label>动画速度</label>
                        <input type="range" id="animation-speed" min="1" max="10" value="5">
                    </div> -->
					</div>

					<div class="panel">
						<h2 class="panel-title"><i class="fas fa-list"></i>途径点</h2>

						<div class="point-list" id="points-container">
							<!-- 点列表将通过JS动态生成 -->
						</div>
					</div>
				</div>
			</div>

			<div class="legend">
				<div class="legend-item">
					<div class="legend-color start-point"></div>
					<span>出发点</span>
				</div>
				<div class="legend-item">
					<div class="legend-color end-point"></div>
					<span>当前点</span>
				</div>
				<div class="legend-item">
					<div class="legend-color path"></div>
					<span>轨迹</span>
				</div>
				<!-- <div class="legend-item">
                <div class="legend-color moving-point"></div>
                <span>移动点</span>
            </div> -->
			</div>

			<!-- <footer>
            <p>© 2023 ECharts中国地图经纬度标点与轨迹系统 | 基于ECharts 5.4.3 | 数据仅用于演示</p>
        </footer> -->
		</div>

		<script>
			// 初始化变量
			let myChart;
			let points = [];
			let movingPointIndex = -1;
			let animationInterval;
			let isAnimating = false;

			// DOM元素
			const longitudeInput = document.getElementById('longitude');
			const latitudeInput = document.getElementById('latitude');
			const pointNameInput = document.getElementById('point-name');
			const addPointBtn = document.getElementById('add-point');
			const clearPointsBtn = document.getElementById('clear-points');
			const drawPathBtn = document.getElementById('draw-path');
			const clearPathBtn = document.getElementById('clear-path');
			// const animatePathBtn = document.getElementById('animate-path');
			// const pauseAnimationBtn = document.getElementById('pause-animation');
			// const animationSpeed = document.getElementById('animation-speed');
			const pointsContainer = document.getElementById('points-container');
			const pointCount = document.getElementById('point-count');
			const statusElement = document.getElementById('status');
			const loadingElement = document.getElementById('loading');

			// 初始化ECharts
			function initChart() {
				const chartDom = document.getElementById('map');
				myChart = echarts.init(chartDom);

				const option = {
					backgroundColor: 'transparent',
					title: {
						text: '',
						subtext: '',
						left: 'center',
						textStyle: {
							color: '#fff'
						},
						subtextStyle: {
							color: '#a0d2eb'
						}
					},
					tooltip: {
						trigger: 'item',
						formatter: function(params) {
							if (params.seriesType === 'scatter') {
								return `${params.data.name}<br/>经度: ${params.value[0]}<br/>纬度: ${params.value[1]}`;
							}
							return params.name;
						}
					},
					geo: {
						map: 'china',
						roam: true,
						label: {
							emphasis: {
								show: false
							}
						},
						itemStyle: {
							areaColor: 'rgba(30, 68, 109, 0.7)',
							borderColor: '#2c5364',
							borderWidth: 2
						},
						emphasis: {
							itemStyle: {
								areaColor: 'rgba(72, 151, 254, 0.5)'
							}
						}
					},
					series: [{
							name: '标记点',
							type: 'scatter',
							coordinateSystem: 'geo',
							symbolSize: 16,
							label: {
								show: true,
								formatter: '{b}',
								position: 'right',
								color: '#fff',
								fontSize: 12
							},
							itemStyle: {
								color: '#4facfe'
							},
							data: []
						},
						{
							name: '轨迹线',
							type: 'lines',
							coordinateSystem: 'geo',
							polyline: true,
							lineStyle: {
								width: 2,
								color: '#4facfe',
								type: 'solid',
								opacity: 8,
							},
							data: []
						},
						{
							name: '移动点',
							type: 'scatter',
							coordinateSystem: 'geo',
							symbol: 'circle',
							symbolSize: 20,
							itemStyle: {
								color: '#ffd700'
							},
							data: []
						}
					]
				};

				myChart.setOption(option);

				// 窗口大小改变时重绘图表
				window.addEventListener('resize', function() {
					myChart.resize();
				});

				// 隐藏加载提示
				loadingElement.style.display = 'none';
			}

			function addPointData(name, lng, lat) {
				lng = Number(lng);
				lat = Number(lat);
				if (isNaN(lng)) {
					showStatus('请输入有效的经度值', 'error');
					return;
				}

				if (isNaN(lat)) {
					showStatus('请输入有效的纬度值', 'error');
					return;
				}

				// 检查是否在中国范围内
				if (lng < 73 || lng > 135 || lat < 18 || lat > 54) {
					showStatus('该坐标不在中国范围内', 'warning');
					return;
				}


				const newPoint = {
					name: name,
					value: [lng, lat],
					itemStyle: {
						color: points.length === 0 ? '#43e97b' : points.length === points.length ? '#ff416c' : '#4facfe'
					}
				};

				points.push(newPoint);
				updateChart();
				updatePointsList();
			}


			// 添加标记点
			function addPoint() {
				const lng = parseFloat(longitudeInput.value);
				const lat = parseFloat(latitudeInput.value);
				const name = pointNameInput.value || `位置${points.length + 1}`;
				addPointData(name, lng, lat);

				showStatus(`已添加标记点: ${name}`, 'success');
			}

			let last_Time = "";

			function get_GPS_Data() {
				//使用$.ajax()发送异步请求
				$.ajax({
					url: "https://apis.bemfa.com/va/getmsg", // 请求路径
					type: "GET", //请求方式
					data: {
						uid: "60ce8437cee20782e7355a16e6bb6a39",
						type: 3, //3 为TCP 1为mqtt
						topic: 'GPS',
						num: 1
					},
					success: function(message) {
						var res = JSON.parse(message);
						// console.log(res);
						// console.log(res.data[0].time);
						// console.log(res.data[0].msg);
						let input = res.data[0].msg;
						// let input = "#116.397#39.907#Longitude_Latitude#"
						const parts = input.split('#').filter(part => part !== '');
						const [Lonfitude, Latitude, labels] = parts;
						const result = {
							Lonfitude: Lonfitude,
							Latitude: Latitude,
							sensorLabels: labels.split('_')
						};
						if (res.data[0].time === last_Time) {} else {
							last_Time = res.data[0].time;
							addPointData(name, Lonfitude, Latitude);
						}
						console.log(result);
					}, //响应成功后的回调函数
					error: function() {
						alert("出错啦...")
					}, //表示如果请求响应出现错误，会执行的回调函数
					dataType: "text" //设置接受到的响应数据的格式
				});
			}
			get_GPS_Data();
			setInterval(() => {
				get_GPS_Data();
			}, 3000); // 每5秒更新一次




			// 更新图表
			function updateChart() {
				const option = myChart.getOption();

				// 更新标记点数据
				option.series[0].data = points.map((point, index) => {
					// 设置起点和终点的颜色
					if (index === 0) {
						return {
							...point,
							itemStyle: {
								color: '#43e97b'
							}
						};
					} else if (index === points.length - 1) {
						return {
							...point,
							itemStyle: {
								color: '#ff416c'
							}
						};
					}else{
						return {
							...point,
							itemStyle: {
								color:  '#4facfe'
							}
						};
					}
					// return point;
				});

				// 更新轨迹线
				if (points.length > 1) {
					option.series[1].data = [{
						coords: points.map(p => p.value)
					}];
				} else {
					option.series[1].data = [];
				}

				myChart.setOption(option);
				pointCount.textContent = points.length;
			}

			// 更新标记点列表
			function updatePointsList() {
				pointsContainer.innerHTML = '';

				points.forEach((point, index) => {
					const pointItem = document.createElement('div');
					pointItem.className = 'point-item';
					pointItem.innerHTML = `
                    <div>${point.name} (${point.value[0].toFixed(4)}, ${point.value[1].toFixed(4)})</div>
                    <div class="point-actions">
                        <button class="danger" onclick="removePoint(${index})"><i class="fas fa-trash"></i></button>
                    </div>
                `;
					pointsContainer.appendChild(pointItem);
				});

				if (points.length === 0) {
					pointsContainer.innerHTML =
						'<div class="point-item" style="justify-content: center; color: #a0d2eb;">暂无标记点</div>';
				}
			}

			// 移除标记点
			window.removePoint = function(index) {
				if (index >= 0 && index < points.length) {
					const removedName = points[index].name;
					points.splice(index, 1);
					updateChart();
					updatePointsList();
					showStatus(`已移除标记点: ${removedName}`, 'info');
				}
			};

			// 清除所有标记点
			function clearAllPoints() {
				points = [];
				clearAnimation();
				updateChart();
				updatePointsList();
				showStatus('已清除所有标记点', 'info');
			}

			// 清除轨迹
			function clearPath() {
				const option = myChart.getOption();
				option.series[1].data = [];
				myChart.setOption(option);
				clearAnimation();
				showStatus('已清除轨迹线', 'info');
			}

			// 绘制轨迹
			function drawPath() {
				if (points.length < 2) {
					showStatus('至少需要两个点才能绘制轨迹', 'warning');
					return;
				}

				updateChart();
				showStatus('轨迹线已绘制', 'success');
			}

			// 动画轨迹
			// function animatePath() {
			//     if (points.length < 2) {
			//         showStatus('至少需要两个点才能播放轨迹', 'warning');
			//         return;
			//     }

			//     if (isAnimating) {
			//         return;
			//     }

			//     isAnimating = true;
			//     movingPointIndex = 0;
			//     showStatus('轨迹动画播放中...', 'info');

			//     // 清除之前的动画
			//     clearAnimation();

			//     // 计算速度（根据滑块值）
			//     // const speed = 1100 - (animationSpeed.value * 100);

			//     // 开始动画
			//     animationInterval = setInterval(() => {
			//         if (movingPointIndex < points.length) {
			//             const point = points[movingPointIndex];

			//             // 更新移动点
			//             const option = myChart.getOption();
			//             option.series[2].data = [{
			//                 name: point.name,
			//                 value: point.value
			//             }];
			//             myChart.setOption(option);

			//             movingPointIndex++;
			//         } else {
			//             clearAnimation();
			//             showStatus('轨迹动画播放完成', 'success');
			//         }
			//     }, speed);
			// }

			// 暂停动画
			// function pauseAnimation() {
			//     if (isAnimating) {
			//         clearInterval(animationInterval);
			//         isAnimating = false;
			//         showStatus('轨迹动画已暂停', 'info');
			//     }
			// }

			// 清除动画
			function clearAnimation() {
				clearInterval(animationInterval);
				movingPointIndex = -1;
				isAnimating = false;

				// 清除移动点
				const option = myChart.getOption();
				option.series[2].data = [];
				myChart.setOption(option);
			}

			// 显示状态信息
			function showStatus(message, type = 'info') {
				statusElement.textContent = message;
				statusElement.className = '';

				switch (type) {
					case 'success':
						statusElement.style.color = '#43e97b';
						break;
					case 'error':
						statusElement.style.color = '#ff416c';
						break;
					case 'warning':
						statusElement.style.color = '#ffd700';
						break;
					default:
						statusElement.style.color = '#4facfe';
				}
			}

			// 添加示例数据
			function addSampleData() {
				const samplePoints = [];
				// const samplePoints = [{
				// 		name: "北京市",
				// 		lng: 116.40,
				// 		lat: 39.90,
				// 		province: "北京市",
				// 		type: "直辖市",
				// 		icon: "fa-landmark",
				// 		color: "#ff6b6b"
				// 	},
				// 	{
				// 		name: "天津市",
				// 		lng: 117.20,
				// 		lat: 39.12,
				// 		province: "天津市",
				// 		type: "直辖市",
				// 		icon: "fa-building",
				// 		color: "#4facfe"
				// 	},
				// 	{
				// 		name: "上海市",
				// 		lng: 121.47,
				// 		lat: 31.23,
				// 		province: "上海市",
				// 		type: "直辖市",
				// 		icon: "fa-tower",
				// 		color: "#00f2fe"
				// 	},
				// 	{
				// 		name: "重庆市",
				// 		lng: 106.55,
				// 		lat: 29.57,
				// 		province: "重庆市",
				// 		type: "直辖市",
				// 		icon: "fa-mountain",
				// 		color: "#ff8e53"
				// 	},
				// 	{
				// 		name: "石家庄市",
				// 		lng: 114.52,
				// 		lat: 38.05,
				// 		province: "河北省",
				// 		type: "省会",
				// 		icon: "fa-industry",
				// 		color: "#43e97b"
				// 	},
				// 	{
				// 		name: "太原市",
				// 		lng: 112.55,
				// 		lat: 37.87,
				// 		province: "山西省",
				// 		type: "省会",
				// 		icon: "fa-coal",
				// 		color: "#ffd700"
				// 	},
				// 	{
				// 		name: "呼和浩特市",
				// 		lng: 111.73,
				// 		lat: 40.83,
				// 		province: "内蒙古自治区",
				// 		type: "首府",
				// 		icon: "fa-horse",
				// 		color: "#9b5de5"
				// 	},
				// 	{
				// 		name: "沈阳市",
				// 		lng: 123.43,
				// 		lat: 41.80,
				// 		province: "辽宁省",
				// 		type: "省会",
				// 		icon: "fa-industry",
				// 		color: "#00bbf9"
				// 	},
				// 	{
				// 		name: "长春市",
				// 		lng: 125.32,
				// 		lat: 43.90,
				// 		province: "吉林省",
				// 		type: "省会",
				// 		icon: "fa-car",
				// 		color: "#00f5d4"
				// 	},
				// 	{
				// 		name: "哈尔滨市",
				// 		lng: 126.63,
				// 		lat: 45.75,
				// 		province: "黑龙江省",
				// 		type: "省会",
				// 		icon: "fa-snowflake",
				// 		color: "#f15bb5"
				// 	},
				// 	{
				// 		name: "南京市",
				// 		lng: 118.78,
				// 		lat: 32.04,
				// 		province: "江苏省",
				// 		type: "省会",
				// 		icon: "fa-school",
				// 		color: "#fee440"
				// 	},
				// 	{
				// 		name: "杭州市",
				// 		lng: 120.16,
				// 		lat: 30.25,
				// 		province: "浙江省",
				// 		type: "省会",
				// 		icon: "fa-lake",
				// 		color: "#00f5d4"
				// 	},
				// 	{
				// 		name: "合肥市",
				// 		lng: 117.28,
				// 		lat: 31.86,
				// 		province: "安徽省",
				// 		type: "省会",
				// 		icon: "fa-hotel",
				// 		color: "#ff6b6b"
				// 	},
				// 	{
				// 		name: "福州市",
				// 		lng: 119.30,
				// 		lat: 26.08,
				// 		province: "福建省",
				// 		type: "省会",
				// 		icon: "fa-tree",
				// 		color: "#43e97b"
				// 	},
				// 	{
				// 		name: "南昌市",
				// 		lng: 115.89,
				// 		lat: 28.68,
				// 		province: "江西省",
				// 		type: "省会",
				// 		icon: "fa-water",
				// 		color: "#4facfe"
				// 	},
				// 	{
				// 		name: "济南市",
				// 		lng: 117.00,
				// 		lat: 36.65,
				// 		province: "山东省",
				// 		type: "省会",
				// 		icon: "fa-mountain",
				// 		color: "#9b5de5"
				// 	},
				// 	{
				// 		name: "郑州市",
				// 		lng: 113.62,
				// 		lat: 34.75,
				// 		province: "河南省",
				// 		type: "省会",
				// 		icon: "fa-train",
				// 		color: "#ffd700"
				// 	},
				// 	{
				// 		name: "武汉市",
				// 		lng: 114.30,
				// 		lat: 30.60,
				// 		province: "湖北省",
				// 		type: "省会",
				// 		icon: "fa-bridge",
				// 		color: "#00bbf9"
				// 	},
				// 	{
				// 		name: "长沙市",
				// 		lng: 112.98,
				// 		lat: 28.20,
				// 		province: "湖南省",
				// 		type: "省会",
				// 		icon: "fa-pepper-hot",
				// 		color: "#ff6b6b"
				// 	},
				// 	{
				// 		name: "广州市",
				// 		lng: 113.26,
				// 		lat: 23.12,
				// 		province: "广东省",
				// 		type: "省会",
				// 		icon: "fa-ship",
				// 		color: "#00f2fe"
				// 	},
				// 	{
				// 		name: "南宁市",
				// 		lng: 108.32,
				// 		lat: 22.82,
				// 		province: "广西壮族自治区",
				// 		type: "首府",
				// 		icon: "fa-pagoda",
				// 		color: "#43e97b"
				// 	},
				// 	{
				// 		name: "海口市",
				// 		lng: 110.20,
				// 		lat: 20.04,
				// 		province: "海南省",
				// 		type: "省会",
				// 		icon: "fa-umbrella-beach",
				// 		color: "#ff8e53"
				// 	},
				// 	{
				// 		name: "成都市",
				// 		lng: 104.06,
				// 		lat: 30.67,
				// 		province: "四川省",
				// 		type: "省会",
				// 		icon: "fa-utensils",
				// 		color: "#f15bb5"
				// 	},
				// 	{
				// 		name: "贵阳市",
				// 		lng: 106.71,
				// 		lat: 26.57,
				// 		province: "贵州省",
				// 		type: "省会",
				// 		icon: "fa-hills",
				// 		color: "#9b5de5"
				// 	},
				// 	{
				// 		name: "昆明市",
				// 		lng: 102.71,
				// 		lat: 25.04,
				// 		province: "云南省",
				// 		type: "省会",
				// 		icon: "fa-feather",
				// 		color: "#00bbf9"
				// 	},
				// 	{
				// 		name: "拉萨市",
				// 		lng: 91.14,
				// 		lat: 29.65,
				// 		province: "西藏自治区",
				// 		type: "首府",
				// 		icon: "fa-mountain",
				// 		color: "#4facfe"
				// 	},
				// 	{
				// 		name: "西安市",
				// 		lng: 108.93,
				// 		lat: 34.27,
				// 		province: "陕西省",
				// 		type: "省会",
				// 		icon: "fa-landmark",
				// 		color: "#ffd700"
				// 	},
				// 	{
				// 		name: "兰州市",
				// 		lng: 103.83,
				// 		lat: 36.06,
				// 		province: "甘肃省",
				// 		type: "省会",
				// 		icon: "fa-wind",
				// 		color: "#43e97b"
				// 	},
				// 	{
				// 		name: "西宁市",
				// 		lng: 101.77,
				// 		lat: 36.62,
				// 		province: "青海省",
				// 		type: "省会",
				// 		icon: "fa-water",
				// 		color: "#00f2fe"
				// 	},
				// 	{
				// 		name: "银川市",
				// 		lng: 106.27,
				// 		lat: 38.47,
				// 		province: "宁夏回族自治区",
				// 		type: "首府",
				// 		icon: "fa-dune",
				// 		color: "#ff6b6b"
				// 	},
				// 	{
				// 		name: "乌鲁木齐市",
				// 		lng: 87.62,
				// 		lat: 43.82,
				// 		province: "新疆维吾尔自治区",
				// 		type: "首府",
				// 		icon: "fa-mountain-sun",
				// 		color: "#ff8e53"
				// 	},
				// 	{
				// 		name: "台北市",
				// 		lng: 121.56,
				// 		lat: 25.03,
				// 		province: "台湾省",
				// 		type: "省会",
				// 		icon: "fa-island-tropical",
				// 		color: "#9b5de5"
				// 	},
				// 	{
				// 		name: "香港",
				// 		lng: 114.16,
				// 		lat: 22.32,
				// 		province: "香港特别行政区",
				// 		type: "特别行政区",
				// 		icon: "fa-building",
				// 		color: "#00bbf9"
				// 	},
				// 	{
				// 		name: "澳门",
				// 		lng: 113.54,
				// 		lat: 22.20,
				// 		province: "澳门特别行政区",
				// 		type: "特别行政区",
				// 		icon: "fa-casino",
				// 		color: "#f15bb5"
				// 	}
				// ];

				samplePoints.forEach(point => {
					points.push({
						name: point.name,
						value: [point.lng, point.lat]
					});
				});

				updateChart();
				updatePointsList();


				// 自动绘制轨迹
				setTimeout(drawPath, 500);
			}

			// 事件监听器
			addPointBtn.addEventListener('click', addPoint);
			clearPointsBtn.addEventListener('click', clearAllPoints);
			drawPathBtn.addEventListener('click', drawPath);
			clearPathBtn.addEventListener('click', clearPath);
			// animatePathBtn.addEventListener('click', animatePath);
			// pauseAnimationBtn.addEventListener('click', pauseAnimation);

			// 输入框回车键支持
			longitudeInput.addEventListener('keypress', function(e) {
				if (e.key === 'Enter') addPoint();
			});

			latitudeInput.addEventListener('keypress', function(e) {
				if (e.key === 'Enter') addPoint();
			});

			pointNameInput.addEventListener('keypress', function(e) {
				if (e.key === 'Enter') addPoint();
			});

			// 初始化图表并添加示例数据
			window.onload = function() {
				// 添加地图加载提示
				loadingElement.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 正在加载地图数据...';

				// 延迟初始化以确保资源加载完成
				setTimeout(() => {
					initChart();
					addSampleData();
				}, 500);
			};
		</script>
	</body>
</html>